<template>
  <div>
    <el-row style="margin-top: 10px">
      <el-button split-button type="primary" size="small" @click="handleCreate">添加设备</el-button>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-table
          :data="list"
          :height="tableHeight"
          style="width: 100%"
          v-loading="loading"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="50">
        </el-table-column>
        <el-table-column
            label="设备名称"
            prop="deviceName"
            align="center"
            width="150">
        </el-table-column>
        <el-table-column
            label="设备类型"
            prop="deviceType"
            width="110"
            align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.deviceType === 1">灯光</span>
            <span v-if="scope.row.deviceType === 2">电源</span>
            <span v-if="scope.row.deviceType === 3">USB电源</span>
            <span v-if="scope.row.deviceType === 4">人体传感器</span>
            <span v-if="scope.row.deviceType === 5">其他</span>
          </template>
        </el-table-column>
        <el-table-column
            label="设备位置"
            prop="locationCoding"
            align="center"
            width="100">
        </el-table-column>
        <el-table-column
            label="接入方式"
            prop="accessMode"
            width="80"
            align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.accessMode === 1">HA</span>
            <span v-if="scope.row.accessMode === 2">MQTT</span>
          </template>
        </el-table-column>
        <el-table-column
            label="创建时间"
            prop="createTime"
            align="center"
            :formatter="formatDate">
        </el-table-column>
        <el-table-column
            label="健康情况"
            prop="health"
            align="center"
            width="80">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.health === 1">健康</el-tag>
            <el-tag type="danger" v-if="scope.row.health === 2">故障</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="运行状态"
            prop="runtimeStatus"
            width="80"
            align="center">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.runtimeStatus === 1">空闲</el-tag>
            <el-tag type="success" v-if="scope.row.runtimeStatus === 2">使用中</el-tag>
            <el-tag type="info"    v-if="scope.row.runtimeStatus === 3">关闭</el-tag>
            <el-tag type="danger" v-if="scope.row.runtimeStatus === 4">故障</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            width="220"
            label="操作方式"
            align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button type="primary" size="small" @click="handleBind(scope.row.id)">绑定</el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page="this.pagination.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="this.pagination.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="this.pagination.total">
      </el-pagination>
    </el-row>
    <!-- 对话框 -->
    <device-edit-dialog :visible.sync="deviceEditDialogVisible" :id.sync="currentDeviceId"></device-edit-dialog>
    <device-bind-dialog :visible.sync="deviceBindDialogVisible" :id.sync="currentDeviceId"></device-bind-dialog>
  </div>

</template>

<script>
import {deleteDevice, listDevices} from "@/api/device";
import DeviceEditDialog from "./components/DeviceEditDialog";
import DeviceBindDialog from "./components/DeviceBindDialog";
import Formatter from "../../utils/formatter";

export default {
  name: "DeviceList",
  components: {DeviceBindDialog, DeviceEditDialog},
  data() {
    return {
      tableHeight: window.innerHeight - 179,  // 计算表格高度
      deviceEditDialogVisible: false,  // 是否显示设备添加对话框
      deviceBindDialogVisible: false,
      currentDeviceId: '',  // 当前选中设备ID
      list: [],  // 列表数据
      pagination: {
        page: 0,
        pageSize: 10,
        total: 0
      },  // 分页信息
      multipleSelection: [],
      loading: true
    }
  },
  created: function () {
    this.fetchData()
  },
  methods: {

    // 获得数据
    fetchData() {
      listDevices(1, this.pagination.pageSize).then((response) => {
        this.list = response.data.data.list
        this.pagination = response.data.data.pagination
        this.loading = false
      })
    },

    // 弹出创建设备信息对话框
    handleCreate() {
      this.currentDeviceId = ''
      this.deviceEditDialogVisible = true
    },

    // 弹出编辑设备信息对话框
    handleEdit(id) {
      this.deviceEditDialogVisible = true;
      this.currentDeviceId = id + ''
    },

    // 删除指定信息记录
    handleDelete(id) {
      deleteDevice(id).then((response) => {
        if (response.data.code === 200) {
          this.fetchData();
        } else {
          this.$alert('删除失败', '提示', {
            confirmButtonText: '确定'
          })
        }
      });
    },

    // 绑定教室信息
    handleBind(id) {
      this.deviceBindDialogVisible = true;
      this.currentDeviceId = id + ''
    },

    // 改变每页条数刷新数据
    handleSizeChange(pageSize) {
      listDevices(1, pageSize).then((response) => {
        this.list = response.data.data.list
        this.pagination = response.data.data.pagination
        this.loading = false
      })
    },

    // 翻页刷新数据
    handlePageChange(page) {
      listDevices(page, this.pagination.pageSize).then((response) => {
        this.list = response.data.data.list
        this.pagination = response.data.data.pagination
        this.loading = false
      })
    },

    // 多选记录
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    // 格式化日期字段
    formatDate: function (row) {
      if (!row.createTime) {
        console.warn('缺少createTime字段值')
        return ''
      }
      return Formatter.formatDate(row.createTime,'YYYY-MM-DD')
    }
  }
}
</script>

<style scoped>

</style>